<template>
  <div id="echarts_bottoms" />
</template>
<script>
import echarts from 'echarts'
// import { getReport } from "@/api/report.js";
export default {
  props: ['bottomWidth', 'bottomHeight'],
  data() {
    return {
      flag: false, // 判断图标渲染结束
      separateEcharts: null,
      list: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        diannum: [120, 132, 101, 134, 90, 230, 210]
      }
    }
  },
  watch: {
    bottomWidth(n) {
      if (this.separateEcharts && this.flag) {
        this.separateEcharts.resize()
      }
    },
    bottomHeight(n) {
      if (this.separateEcharts && this.flag) {
        this.separateEcharts.resize()
      }
    }
  },
  mounted() {
    // getReport({
    //   size: 5,
    // }).then((res) => {
    //   const aTime = [];
    //   const dian = [];
    //   // const zhong = []
    //   res.data.dianNumVos.forEach((item) => {
    //     aTime.push(item.createTime.split(" ")[0]);
    //     dian.push(item.num);
    //   });
    //   // res.data.zhongNumVos.forEach(item => {
    //   //   zhong.push(item.num)
    //   // })
    //   this.list.data = aTime;
    //   this.list.diannum = dian;
    //   // this.list.zhongnum = zhong
    //   this.initEcharts();
    // });
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      this.separateEcharts = echarts.init(
        document.getElementById('echarts_bottoms')
      )
      this.separateEcharts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          scale: true,
          data: this.list.data,
          axisLine: {
            lineStyle: {
              color: '#314155'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#314155'
            }
          },
          type: 'value',

          axisLine: {
            lineStyle: {
              color: '#314155'
            }
          }
        },
        series: [
          {
            animationDuration: 1000,
            itemStyle: {
              // 拐点样式
              color: '#0073E8',
              borderWidth: 12,
              borderType: 'solid',
              borderColor: 'rgba(0,115,232,0.5)'
            },
            showSymbol: false, // 去掉点
            hoverAnimation: true, // hover样式
            smooth: true, // 圆滑
            data: this.list.diannum,
            type: 'line',
            areaStyle: {
              color: '#0073E8',
              opacity: 0.1
            },
            lineStyle: {
              color: '#0073E8'
            }
          }
          // {
          //   animationDuration: 1000,
          //   itemStyle: { // 拐点样式
          //     color: '#0AD239',
          //     borderWidth: 12,
          //     borderType: 'solid',
          //     borderColor: 'rgba(10,210,57,0.5)'

          //   },
          //   showSymbol: false, // 去掉点
          //   hoverAnimation: true, // hover样式
          //   smooth: true, // 圆滑
          //   data: this.list.zhongnum,
          //   type: 'line',
          //   areaStyle: {
          //     color: '#0AD239',
          //     opacity: 0.1
          //   },
          //   lineStyle: {
          //     color: '#0AD239'
          //   }
          // }
        ]
      })
      this.separateEcharts.on('finished', () => {
        this.flag = true
      })
      this.$emit('separateEcharts', this.separateEcharts)
    }
  }
}
</script>

<style lang="scss" scoped>
#echarts_bottoms {
  height: 140%;
  width: 120%;
}
</style>
